<template>
  <div id="s_map">
     <div v-if="poemLocation" class="box">  
      <p class="commen" style="margin-bottom: 1%;">创作地点：{{ poemLocation.place }}</p>  
      <p class="commen">创作时间: {{ poemLocation.time }}</p>  
    </div>   
     <!-- <div v-if="poemLocation && poemLocation.coordinates" class="box">  
      <p class="commen" style="margin-bottom: 1%;">创作地点：{{ poemLocation.place }}</p>  
      <p class="commen">创作时间: {{ poemLocation.time }}</p>  
    </div>
    <div v-else class="box">
      <p class="commen" style="margin-bottom: 1%;">暂无此消息</p>
    </div>
       -->
  </div>
</template>

<script >
import { mapState, mapMutations } from 'vuex';
import AMapLoader from '@amap/amap-jsapi-loader';

let map = null;
let infoWindow = null;

let marker = null; // 新增变量用于存储标记实例

export default {
  name:"Map",
  computed: {
    ...mapState(['poemLocation']),
  },
  methods: {
    //更新地图经纬度
    ...mapMutations(['setPoemLocation']),
    // updateMap() {
    //   if (this.poemLocation) {
    //     map.setZoomAndCenter(15, this.poemLocation.coordinates);
    //     infoWindow.open(map, this.poemLocation.coordinates);
    //   }
    // },
        updateMap() {
      if (this.poemLocation) {
        const { coordinates } = this.poemLocation;
        
        // 设置地图的中心和缩放级别
        map.setZoomAndCenter(10, coordinates);
        
        // 如果标记已经存在，则更新其位置，否则创建一个新的标记
        if (!marker) {
          marker = new AMap.Marker({
            position: coordinates,
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 使用高德地图提供的标记图标
            offset: new AMap.Pixel(-13, -30)
          });
          map.add(marker); // 将标记添加到地图上
        } else {
          marker.setPosition(coordinates); // 更新标记位置
        }
        
        // 更新信息窗口的内容和位置（会显示在标记上）
        // infoWindow.setContent(`
        //   <div class="info-window-content">
        //     <p>地点：${this.poemLocation.place}</p>
        //   </div>
        // `);
        // infoWindow.open(map, coordinates);
      }
    },

  },
  mounted() {
    AMapLoader.load({
      key: "2c79a7f8c05647f33b075ee487531840", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0",// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale","AMap.Marker"]//需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        map = new AMap.Map("s_map", {
          // 设置地图容器id
          viewMode: "3D",// 是否为3D地图模式
          zoom: 11,
          center: [116.397428, 39.90923], 
          mapStyle: 'amap://styles/whitesmoke',// 初始化地图中心点位置
          pitch: 50,
        });
        //地图加载完成后隐藏天层
      map.on('complete', function () {
        const skyLayer = map.getLayers().find(layer => layer.CLASS_NAME === "AMap.SkyLayer");
        if (skyLayer) {
          skyLayer.hide();
        }
      });

        infoWindow = new AMap.InfoWindow({
          content: '',
          offset: new AMap.Pixel(0, -30)
        });
      })
      .catch((e) => {
        console.log(e);
      });
  },

  //监听 poemLocation 状态的变化!!!
  watch: {
    poemLocation: {
      handler(newPoemLocation) {
        if (newPoemLocation) {
          this.updateMap();
        }
      },
      immediate: true,
    },
  },
  beforeDestroy() {
    map?.destroy();
    infoWindow?.destroy();
  },
};
//setup
// import { mapState, mapMutations } from 'vuex';
// import { useStore } from 'vuex';
// import data from "@/assets/json/杜甫诗词交互数据.json";
// import { onMounted, onUnmounted ,ref,watch} from "vue";
// import AMapLoader from "@amap/amap-jsapi-loader";

// const store = useStore();  
// const poemLocation = ref(store.state.poemLocation);  
// watch(() => store.state.poemLocation, (newLocation) => {  
//   poemLocation.value = newLocation;  
//   if (newLocation && newLocation.coordinates) {  
//     map.setCenter(newLocation.coordinates);  
//   }  
// });  



// let map = null;

// onMounted(() => {
//   window._AMapSecurityConfig = {
//     securityJsCode: "「b132114373c23654eeaae0e171f851d6」",
//   };
//   AMapLoader.load({
//     key: "	2c79a7f8c05647f33b075ee487531840", // 申请好的Web端开发者Key，首次调用 load 时必填
//     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
//     plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
//   })
//     .then((AMap) => {
//       map = new AMap.Map("s_map", {
//         // 设置地图容器id
//         viewMode: "3D", // 是否为3D地图模式
//         zoom: 11, // 初始化地图级别
//         center: [116.397428, 39.90923],
//         mapStyle: 'amap://styles/whitesmoke', // 初始化地图中心点位置
//         pitch: 50,
//       });
//       // 地图加载完成后隐藏天层
//       map.on('complete', function () {
//         const skyLayer = map.getLayers().find(layer => layer.CLASS_NAME === "AMap.SkyLayer");
//         if (skyLayer) {
//           skyLayer.hide();
//         }
//       });

//        // 如果有选中的古诗位置信息，初始化地图中心  
//     if (poemLocation.value && poemLocation.value.coordinates) {  
//       map.setCenter(poemLocation.value.coordinates);  
//     }  


//    console.log(map); // 确保 map 实例被创建
//        })
       
//     .catch((e) => {
//       console.log(e);
//     });
 
// });

// onUnmounted(() => {
//   map?.destroy();
// });
</script>



<style scoped>
#s_map {
  width: 97%;
  /* height: 500px; */
  height: 100%;
  margin-left: 1.5%;
  border: 5px solid rgba(144, 161, 211, 0.1);
}
.box{
  margin-left: 1%;
  margin-top: 1%;
  width: 60%;
  height: 60%;
}

.commen{
  color: rgb(92, 191, 191);
  font-style: italic;
  font-size: 20px;
  font-family: '宋体', SimSun, sans-serif;
}

</style>